

//渐变的框架
//传入当前div对象,当前属性值,目标属性值,需改变属性,最后是渐变速率(呈反比)
function divChange(oDiv, currentVal, targetVal, prop, nextFunc = function () {}, denominator = 5) {
    currentVal = parseFloat(currentVal);    //因为从oDiv.style['opacity']获取出来的值是string...

    oDiv.timer = setInterval(function () {
        if (currentVal !== targetVal) {
            if (prop === 'opacity') {
                //处理透明度,因为透明度是[0,1],所以乘以100
                let speed = targetVal > currentVal ?
                    Math.ceil((targetVal * 100 - currentVal * 100) / denominator) : Math.floor((targetVal * 100 - currentVal * 100) / denominator);
                currentVal += speed / 100;
                oDiv.style[prop] = currentVal;

                //因为是小数很难让2者完全相等,所以设置当到精度0.0001时使2者相等
                if (Math.abs(currentVal - targetVal) <= 0.0001) currentVal = targetVal;

            } else {
                //处理带px的属性
                let speed = targetVal > currentVal ?
                    Math.ceil((targetVal - currentVal) / denominator) : Math.floor((targetVal - currentVal) / denominator);
                currentVal += speed;
                oDiv.style[prop] = currentVal + 'px';
            }
        } else {
            clearInterval(oDiv.timer);
            nextFunc();       //当本函数执行完后再执行下一个函数
        }
    }, 25);
}